<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style rel="stylesheet">
        .active{
            color:red;
        }
    </style>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
    <div id="app">
        {{message}}<input type="text" v-model="message">

        <h1>v-bind:动态属性</h1>
        <button v-bind:id="id">点我</button>
        <h1>v-bind:属性名 简写为：:属性名  </h1>
        <!--
        {'active':flag}
         样式名:变量名
        -->
        <p :class="{'active':flag}">测试</p>

        <a :href="href">百度一下</a>


        <h1>普通的文本</h1>
        <a href="href">百度一下</a>
    </div>

    <script>
       // document.getElementById("app").innerHtml="";

        //1,构建Vue实例
        var app =  new Vue({
            el:"#app",//容器的id
            data: { //定义数据
                message: "helloworld!!",
                href:"http://www.baidu.com",
                id:1,
                flag:true
            }
        });

    </script>

</body>
</html>